<template>
  <div class="header-container">
    <h1>myapp</h1>
    <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="transparent"
        text-color="#fff"
        active-text-color="#ffd04b"
    >
      <el-menu-item index="1" @click="home">首页</el-menu-item>
      <el-menu-item index="2">题库</el-menu-item>
      <el-menu-item index="3">前端</el-menu-item>
      <el-menu-item index="4">后端</el-menu-item>
      <el-menu-item index="5">嵌入式</el-menu-item>
    </el-menu>
    <el-input size="mini" input-style="background-color:#3d444c;border-color:#3d444c" placeholder="请输入查找内容" suffix-icon="el-icon-search">
    </el-input>

    <el-button size="mini" @click="login">登录/注册</el-button>

  </div>
</template>

<script>

export default {
  name: "Header",
  data(){},

  methods:{
    login(){
      this.$router.push({name:'login'})
      // router.push('/login')
    },
    home(){
      this.$router.push({name:'home'})
      // router.push('/login')
    }
  }
}
</script>

<style scoped>
  .header-container{
    z-index:999;
    position: fixed;
    top: 0;
    width: 100%;
    height: 10%;
    background-color: #545c64;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .header-container h1{
    width: 10%;
    color: #ffffff;
  }
  .header-container .el-menu{
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    border-bottom: 0;
  }
  .header-container .el-menu .el-menu-item{
    height: 100%;
  }
  .header-container .el-input{
    width: 20%;
    color: #31363e;
  }
  .header-container .el-button{
    position: fixed;
    right: 10px;
  }

</style>